import React,{Component} from 'react';
import axios from 'axios'
import { SearchBar,Carousel } from "antd-mobile";

export default class HomeView extends Component{
  state={
    imgHeight: 176,
    swiData:[
      {
        url:'http://zone-yingerfashion.oss-cn-shenzhen.aliyuncs.com/storage/images/grid_image/d0a7e401047dab57dcbb58f0e12ebc6f.jpeg?timestamp=1615949501603',

      },
      {
        url:'http://zone-yingerfashion.oss-cn-shenzhen.aliyuncs.com/storage/images/grid_image/ef64516bf5b5dd932fa80a3e4bc7755d.jpeg?timestamp=1615949501603'
      }
    ],
    goodsList:[
      {
        url:'http://mallcdn.yingerfashion.com/storage/images/dopEcshore/167a0bc7a0de56899888f1561b3cbd49.jpg?x-oss-process=image/resize,m_mfit,h_200,w_200&timestamp=1616294173864',
      },
      {
        url:'http://mallcdn.yingerfashion.com/storage/images/dopEcshore/34f7ce8d9a254615776ee530a1df6301.jpg?x-oss-process=image/resize,m_mfit,h_200,w_200&timestamp=1616294173865',
      },
      {
        url:'http://mallcdn.yingerfashion.com/storage/images/dopEcshore/58ea0055dcf7c80e2921dbaba8d1b5b4.jpg?x-oss-process=image/resize,m_mfit,h_200,w_200&timestamp=1616294173866',
      },
      {
        url:'http://mallcdn.yingerfashion.com/storage/images/dopEcshore/cee07e94df4e870e4e48e98a5a32dc23.jpg?x-oss-process=image/resize,m_mfit,h_200,w_200&timestamp=1616294173866',
      }
    ]
  }

  componentDidMount(){
    axios.post('/api/mobile/WeiXin/living',{
      app_id: "wx280a90f7bcf6aa06",
      appkey: "mmGdRIvDvY7E1hxX",
      sign: "1C5E3613E8742AE22BAC527671FC2BBC",
      timestamp: 1616309328
    }).then(res=>{
      console.log(res)
    })
  }

  goodsDetail=()=>{
    console.log(this)
    this.props.history.push('/goodsDetailView');
  }
  
  render() {
    let {swiData,goodsList}=this.state;
    return (
      <div className="homeView height-100" style={{paddingBottom:'55px'}}>
        <SearchBar placeholder="轻商务系列"/>
        <Carousel
          autoplay
          infinite
          // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          // afterChange={index => console.log('slide to', index)}
        >
          {swiData.map(item => (
            <img
              key={item.url}
              src={item.url}
              alt="首页轮播图"
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          ))}
        </Carousel>
        <div>
          <img style={{width:'100%'}} src="http://zone-yingerfashion.oss-cn-shenzhen.aliyuncs.com/storage/images/layout_image_component/a9b0d597c3df3c34c88e00c38519996f.jpeg" alt=""/>
        </div>
        <div>
          <img style={{width:'100%'}} src="http://zone-yingerfashion.oss-cn-shenzhen.aliyuncs.com/storage/images/layout_image_component/d4011e60b2c9a2c91deaa430466467e7.jpeg" alt=""/>
        </div>
        <ul className="flex-start bg-white padding-10 scroll-y">
          {
            goodsList.map(item =>{
              return (
                <li onClick={this.goodsDetail} style={{width:'120px'}} className="flex-shrink-0" key={item.url}>
                  <div className="link-img">
                    <img style={{width:'100%',height:'120px'}} src={item.url} alt="商品图片"/>
                  </div>
                  <div className="flex-item flex-col width-100 col-space-between">
                    <span className="padding-t-10 line-ellispsis-1 font-mini" style={{color:'rgb(120, 121, 122)'}}>SONG OF SONG 歌中歌</span>
                    <div className="padding-t-5">
                      <div>
                        <p className="font-big font-bold" style={{color:'rgb(23, 24, 25)'}}>￥3843</p> 
                      </div>
                    </div>
                  </div>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}